<template>
  <!-- 派工节点 -->
  <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
  <div class="draggable-option-item">
    <span class="draggable-option-item-label">条件关系</span>
    <a-select v-model:value="props.list.type" placeholder="请选择条件关系" :options="options"
      :filter-option="filterOption"></a-select>
  </div>
  <a-button block type="link" size="small" @click="addDispatch">添加条件</a-button>
  <Draggable tag="ul" item-key="index" ghostClass="ghost" handle=".drag-item" :group="{ name: 'options' }"
    :list="dispatchList">
    <template #item="{ element, index }">
      <div class="draggable-option">
        <a-row>
          <CloseCircleFilled @click="deleteRe(index)" />
          <a-col :span="1" className="drag-item"><span class="iconfont up-Sort drag-item">
              <UnorderedListOutlined style="width:10px" />
            </span></a-col>
          <a-col :span="21" class="draggable-option-list">
            <div class="draggable-option-item">
              <span class="draggable-option-item-label">派工描述</span>
              <a-input v-model:value="element.rangeValue" placeholder="请输入按钮名称" style="width: 66%"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-input>
              <a-button block :class="element.rangeType ? 'ant-design-button-active' : 'ant-design-button'"
                @click="showModal">{{ element.rangeType ? "已设置派工范围" : "设置派工范围" }}</a-button>
            </div>
          </a-col>
        </a-row>
      </div>
    </template>
  </Draggable>
</template>

<script setup>
import { ref, defineProps } from "vue";
import Draggable from "vuedraggable";
import { CloseCircleFilled, UnorderedListOutlined } from "@ant-design/icons-vue";
const props = defineProps({
  list: {
    type: Array
  },
  lineHeight: {
    type: String,
    default: "70px"
  }
});
const deleteRe = (index) => {
  emit("removeElement", index);
};
const filterOption = (input, option) => {
  return option.areaName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

/**
 *
 * 拖拽
 *
 */
const onStart = () => { };
const onEnd = () => { };
</script>

<style lang="less" scoped>
@var2: #ffffff;
@var10: #cccccc;
@width: 100%;

.draggable-option-title {
  margin-top: 5px;
  margin-bottom: 10px;
}

.draggable-option {
  position: relative;

  .ant-row {
    margin-bottom: 10px;
  }

  .anticon-close-circle {
    color: #f00;
    position: absolute;
    right: 0px;
    top: -10px;
  }

  .dragflow-item {
    height: v-bind("props.lineHeight");
  }

  .draggable-option-list {
    border: 1px solid @var10;
    border-style: dashed;
    padding: 12px 10px;

    .draggable-option-item {
      margin-bottom: 10px;

      .draggable-option-item-label {
        display: inline-block;
        width: 70px;
      }
    }

    .draggable-option-item-rule {
      span {
        padding-right: 5px;
      }
    }
  }

  .list-rule {
    margin-bottom: 10px;
  }
}

.ghost {
  background: @var2;

  &::after {
    background: @var2;
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

ul {
  margin: 0;
  padding: 0;
}

li.ghost {
  list-style: none;
  font-size: 0;
  display: block;
  position: relative;
}

.ant-design-button {
  width: @width;
  color: rgb(75, 100, 241);
  border-color: rgb(75, 100, 241);
}

.ant-design-button[data-v-3320de7a] {
  width: 32%;
}
</style>
